<template>
	<!-- 添加集团 -->
	<view class="wp">
		<view class="item">
			<view class="name">集团命名<text class="red">*</text></view>
			<input type="text" v-model="gname" placeholder="请输入集团名称">
		</view>
		<view class="item">
			<view class="name">店铺ID<text class="red">*</text></view>
			<input type="text" v-model="uid" placeholder="请输入要查询的店铺ID">
		</view>
		<view class="btn" @click="searchStore">查询</view>
		<view class="shop" @click="select" v-if="info.supname!=''">
			<image :src="info.logo"></image>
			<view class="info">
				<view class="tit clamp">{{info.supname}}</view>
				<view class="type">门店类型：{{info.paymode}}</view>
				<view class="time">负责人：{{info.principalname}}</view>
			</view>
			<view class="select" v-if="isSelect"><image src="/static/duihao.png" mode="widthFix"></image></view>
		</view>
		<view class="sure" @click="onsumbit">确认添加</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					supname: ''
				},
				gname: '',
				uid: '',
				isSelect: true,
			}
		},
		methods: {
			select(){
				this.isSelect = !this.isSelect;
			},
			searchStore() {
				if(this.uid=='') return this.$api.msg('请输入要查询的店铺ID');
				this.$axios('groupsupp/searchSup', 'POST', 'member', {
					uid: this.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.info=res.data.data.info;
					}
				})
			},
			onsumbit() {
				if(this.uid=='') return this.$api.msg('请输入店铺ID');
				if(this.gname=='') return this.$api.msg('请输入集团名称');
				this.$axios('groupsupp/saveGroup', 'POST', 'member', {
					uid: this.uid,
					gname: this.gname
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('提交成功！')
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/groupmenu/groupList'
							})
						},1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
}
.wp{
	padding: 20rpx;
	.item{
		display: flex;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		.name{
			color: #333333;
			font-weight: 600;
			.red{
				color: #FF2222;
			}
		}
		input{
			width: 77%;
		}
	}
	.btn{
		height: 80rpx;
		background: #A34EE8;
		border-radius: 12rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.shop{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
			image{
				width: 144rpx;
				height: 144rpx;
				border-radius: 12rpx;
			}
			.info{
				width: calc(100% - 176rpx);
				padding: 0 20rpx;
				font-size: 24rpx;
				line-height: 1.8;
				.tit{
					font-size: 28rpx;
					color: #333333;
					font-weight: 600;
				}
				.type{
					color: #3FA859;
				}
				.name{
					color: #999999;
				}
			}
			.select{
				width: 32rpx;
				height: 32rpx;
				background: #8615E1;
				border-radius: 32rpx;
				text-align: center;
				line-height: 32rpx;
				image{
					width: 20rpx;
				}
			}
	}
	.sure{
		width: 396rpx;
		height: 74rpx;
		background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
		border-radius: 38rpx;
		line-height: 74rpx;
		color: #fff;
		text-align: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 60rpx;
		margin: auto;
	}
}
</style>
